<template>
    <scroll-view>
        <div v-for="(item, index) in list" :key="index">
            <div
                style="padding: 5px"
                @click="
                    () => {
                        toEdit(item)
                    }
                "
            >
                <AddressCard
                    :id="item.id"
                    :name="item.name"
                    :phone="item.telephone"
                    :is-default="item.isDefault"
                    :address="
                        item.provinceName +
                        item.cityName +
                        item.areaName +
                        (item.streetName || '') +
                        item.address
                    "
                ></AddressCard>
            </div>
        </div>
        <div style="height: 80px"></div>
        <div
            class="bottom"
            style="justify-content: center; width: 100%; display: flex; flex-direction: row"
        >
            <div class="addButton">手动新增</div>
        </div>
    </scroll-view>
</template>

<script setup lang="ts">
import AddressCard from '@/mainPages/address/components/address-item.vue'
import request from '@/utils/request'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const list = ref([])

onLoad(() => {
    request.get('/wl-portal/portal/address/list').then((res) => {
        console.log(res)
        list.value = res.data
        console.log(list.value.length)
    })
})
function toEdit(item) {
    uni.navigateTo({ url: `/mainPages/address/address-edit?id=${item.id}` })
}
</script>

<style scoped lang="scss">
.bottom {
    position: fixed;
    bottom: calc(var(--window-bottom));
    z-index: 1030;
    margin-bottom: 20px;
}

.addButton {
    width: 134px;
    height: 42px;
    line-height: 20px;
    border-radius: 4px;
    background-color: rgba(56, 156, 253, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    font-family: Microsoft Yahei;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
